<template>
    <div class="cardWrap">
        <div class="card" v-for="(item, index) in courseStore.videoList" :key="index">
            <div class="card-img">
                <!-- 视频图片 -->
                <a class="card-picture">
                    <img :src="item.cover" />
                </a>
            </div>

            <!-- 卡片标题和浏览量、点赞、收藏等 -->
            <div class="card-main">
                <!-- 作品，文字描述 -->
                <div class="card-title">
                    <!-- <button size="small" class="production">会员免费</button> -->
                    <!-- <span class="production" style="">会员免费</span> -->
                    <span class="title">{{
                    item.title
                    }}</span>
                </div>
                <div class="priceAndLook">
                    <p class="price">￥{{item.commodityBackup.price}}</p>
                    <p class="browse-people">{{ Math.ceil(item.algorithmSortValue )}}人浏览</p>

                </div>

                <!-- 点赞、消息、收藏 -->
                <ul>
                    <li>
                        <!-- <i class="iconfont icon-dianzan"></i>  -->
                        <i><svg t="1666114636781" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="856" width="14" height="14">
                                <path
                                    d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819"
                                    fill="#D8DBE6" p-id="857"></path>
                            </svg>
                        </i>
                        <span>{{ item.favorableValue }}</span>
                    </li>
                    <li>
                        <!-- <i class="iconfont icon-xiaoxi"></i> -->
                        <i>
                            <svg t="1666115054608" class="icon" viewBox="0 0 1025 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="919" width="14" height="14">
                                <path
                                    d="M840.222 125.477H182.895c-65.963 0-119.487 53.58-119.487 119.605v391.41c0 65.903 53.523 119.425 119.487 119.425h336.45S658.526 869.21 677.408 883.969c18.883 14.691 26.511 11.376 26.26 0-0.188-11.384-0.128-128.052-0.128-128.052h136.682c66.091 0 119.548-53.522 119.548-119.426V245.082c0.001-66.026-53.457-119.605-119.548-119.605z m-520.709 384.15c-35.327 0-64.024-28.572-64.024-64.025 0-35.45 28.697-64.025 64.024-64.025s64.026 28.576 64.026 64.025c0 35.453-28.698 64.025-64.026 64.025z m192.078 0c-35.328 0-64.026-28.572-64.026-64.025 0-35.45 28.698-64.025 64.026-64.025 35.327 0 64.026 28.576 64.026 64.025 0 35.453-28.7 64.025-64.026 64.025z m192.077 0c-35.324 0-64.024-28.572-64.024-64.025 0-35.45 28.7-64.025 64.024-64.025 35.327 0 64.027 28.576 64.027 64.025 0 35.453-28.701 64.025-64.027 64.025z"
                                    fill="#D8DBE6" p-id="920"></path>
                            </svg>
                        </i>
                        <span>{{ Math.ceil(item.maxP*1000) }}</span>
                    </li>
                    <li>
                        <!-- <i class="iconfont icon-star"></i> -->
                        <i>
                            <svg t="1666115268509" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="949" width="14" height="14">
                                <path
                                    d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                                    fill="#D8DBE6" p-id="950"></path>
                            </svg>
                        </i>
                        <span>{{ Math.ceil(item.maxP*100) }}</span>
                    </li>
                </ul>
            </div>

            <!-- 分割线 -->
            <!-- <el-divider /> -->
            <!-- <hr style="background-color: #fff;"> -->
            <div style="height: 1px; background-color: #ccc"></div>

            <!-- 卡片底部 -->
            <div class="card-footer">
                <div class="footer-l">
                    <span>
                        <img class="avatar" :src="item.creatorBackup.avatar" />
                    </span>
                    <i class="userName">{{item.creatorBackup.name}}</i>
                </div>
                <span class="time-date">{{moment(item.createTime).format('YY-MM-DD')}}</span>
            </div>
            <div class="creator_info"></div>
        </div>

    </div>
</template>
  
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useCourseStore } from '../../../stores/course/index'
import moment from 'moment'
let courseStore = useCourseStore()
onMounted(() => {
    courseStore.getVideoList(20, 0, {})
});


</script>
  
<style lang="less" scoped>
.cardWrap {
    width: 1200px;
    margin: 0 auto;
}

.card {
    width: 18%;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    margin: 10px 12px;
    display: inline-block;
    overflow: hidden;

    // 卡片头部
    .card-img {
        overflow: hidden;

        .card-picture {
            display: block;
            width: 100%;
            height: 126px;
            background-color: #333;
        }

        img {
            width: 100%;
            // height: 100%;
            // background-size: cover;
        }
    }

    // 卡片主体
    .card-main {
        padding: 10px;

        .card-title {
            height: 36px;
            width: 204px;
            display: flex;
            line-height: 16px;
            word-wrap: word-break;
            word-break: break-all;
            // border: 1px solid red;
            // margin-bottom: 20px;

            .production {
                background-color: #ff578c;
                font-size: 12px;
                border: 1px solid transparent;
                color: #fff;
                padding: 0;
                margin-top: -2px;
                height: 18px;
                border-radius: 3px;
                // width: 24px;
                // height: 14px;
                // font-size: 12px;
                // border: 1px solid #333;
                // border-radius: 4px;
                // margin-right: 10px;
            }

            .title {
                display: block;
                width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .priceAndLook {
            display: flex;
            justify-content: space-between;
            vertical-align: middle;
        }

        .price {
            color: #ff578c;
            font-weight: 540;
        }

        .browse-people {
            height: 32px;
            font-size: 12px;
            line-height: 32px;
            color: #ccc;
            margin-top: -3px;
            // margin-bottom: 4px;
        }

        ul {
            display: flex;

            li {
                margin-right: 10px;

                i {
                    color: #ccc;
                    margin-right: 10px;

                    vertical-align: middle;
                    margin-bottom: 8px;
                }
            }

            span {
                font-size: 12px;
                color: #ccc;
                vertical-align: middle;
            }
        }
    }

    // 分割线
    .el-divider {
        margin: 0;
    }

    // 卡片底部
    .card-footer {
        display: flex;
        height: 50px;
        // justify-content: space-between;
        align-items: center;
        // padding: 10px;
        font-size: 12px;

        .footer-l {
            display: flex;
            height: 24px;
            align-items: center;
            margin: 0 10px;

            .avatar {
                width: 24px;
                height: 24px;
                // background-color: #ccc;
                border-radius: 50%;
                margin-right: 10px;
                // border: 1px solid red;
            }

            span {
                // width: 80px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .userName {
            width: 80px;
            display: block;
            white-space: nowrap;
            /*规定文本不换行**/
            overflow: hidden;
            text-overflow: ellipsis;
            /**显示省略符号来代表被修剪的文本。*/
        }

        .time-date {
            color: #ccc;
            margin: 0 10px;
        }
    }
}

body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
select,
td {
    margin: 0;
    padding: 0;
}

html,
body {
    font: 16px "microsoft yahei";
    word-wrap: break-word;
}

a,
u,
s,
del {
    color: #666;
    text-decoration: none;
}

fieldset,
a img,
.bor0 {
    border: 0;
}

i,
em,
b {
    font-style: normal;
    font-weight: 100;
}

li {
    list-style: none;
}

img {
    vertical-align: middle;
}

table {
    border-collapse: collapse;
}

.ind2 {
    text-indent: 2em;
}

textarea {
    resize: none;
}

textarea,
input {
    outline: 0;
}

.valign {
    text-align: center;
}

.valign img {
    vertical-align: middle;
}

.valign:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clear:after {
    content: "";
    clear: both;
    display: block;
}

.clear:before {
    content: "";
    display: table;
}
</style>
  